<template>
  <section id="qrBox" @click="showQrCode" v-if="showqr">
    <!-- <vue-qr :logoSrc="inventerHeadImg" :text="qrCodeUrl" :logoScale="50" :size="200" class="sss"></vue-qr> -->
    <div class="closeQR">x</div>
    <vue-qr :text="qrCodeUrl" :logoScale="50" :size="200" class="sss" @click.stop></vue-qr>
    <p>邀请新朋友扫码进入乐销商城</p>
    <p>臻享优质生活</p>
  </section>
</template>
<script>
import VueQr from 'vue-qr'
export default {
  components:{ VueQr },
  data () {
    return {
      showqr: false,
      qrCodeUrl: this.qrCodeData,
      inventerHeadImg:'http://thirdwx.qlogo.cn/mmopen/HdUhofEFKPriaibOoYZXq8mKOWh5GtVFZYNG9Q6rgBHa1sTN6ibo5aHrw1B2jLERqwTq2icrbO0YQ7xbwop6ocD8zVbibEH4GfZTH/64'
    }
  },
  props: {
    qrCodeData: String,
    inventerImg: String
  },
  methods:{
    showQrCode () {
      this.showqr = !this.showqr
    },
  }
}
</script>
<style scoped>
#qrBox{
  position: fixed;
  top: 0;
  background: rgba(255,255,255,1);
  /* background: url('../assets/other/p.png');
  background-size: 100%;
  background-repeat: no-repeat; */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#qrBox p{
  color: #333;
  margin-top: 2%;
}
.closeQR{
  position: absolute;
  top: 3%;
  right: 5%;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  font-weight: bold;
  border: 2px solid #000;
  border-radius: 1rem;
}
</style>
